<template>
	<view>
		<nodata v-if="dataList.length==0"></nodata>

		<uni-card v-else @click="detail(item.fId,item)" v-for="(item,index) in dataList" :key="index">
			<view class="samplename" :style="{'background':backgroundColors}">
				<view>{{item[config[0].prop]}}</view>
				<view>{{item[config[1].prop]}}</view>
			</view>

			<view class="row" v-if="config[2]">
				<view class="nameInfo">{{config[2].label}}:</view>
				<view class="contentInfo">{{item[config[2].prop]}}</view>
			</view>

			<view class="rows" v-if="config[3]&&config[3].row" :style="{'hieght':config[3].row?'':'25px'}">
				<view class="nameInfos">{{config[3].label}}:</view>
				<!-- {{item[config[3].prop]}} -->
				<view class="contentInfos"  style="word-wrap:break-word break-word !important;">{{item[config[3].prop]}}</view>
				<!-- <view class="contentInfo" >{{item[config[3].prop]}}2</view> -->
			</view>
			<view class="row" v-if="config[3]&&!config[3].row" >
				<view class="nameInfo">{{config[3].label}}:</view>
		
				<view class="contentInfo" >{{item[config[3].prop]}}</view>
			</view>
			<view class="row" v-if="config[4]">
				<view class="nameInfo">{{config[4].label}}:</view>
				<view class="contentInfo">{{item[config[4].prop]}}</view>
			</view>

			<view class="row" v-if="config[5]">
				<view class="nameInfo">{{config[5].label}}:</view>
				<view class="contentInfo">{{item[config[5].prop]}}</view>
			</view>
			<view class="row" v-if="config[6]">
				<view class="nameInfo">{{config[6].label}}:</view>
				<view class="contentInfo">{{item[config[6].prop]}}</view>
			</view>

		</uni-card>
	</view>
</template>
<script>
	import nodata from '@/components/nodata/nodata.vue';
	export default {
		props: {
			dataList: {
				type: Array,
				default: function() {
					return []
				}
			},
			config: {
				type: Array,
				default: function() {
					return []
				}
			},
			Inv: {
				type: [String, Number],
				default: 0
			},
			backgroundColors: {
				type: String,
				default: 0
			}

		},
		data() {
			return {
				dataNum: this.Inv
			}
		},
		watch: {
			Inv(e) {
				this.dataNum = e
			},
		},
		components: {
			nodata
		},
		methods: {
			detail(id, item) {
				var data = {
					id: id,
					Inv: this.dataNum,
					item: JSON.stringify(item)
				}
				this.$emit('yj_viewForm', data)
			}
		}
	}
</script>
<style scoped>
	.nameInfo {
		color: #999999;
	}
	.contentInfo {
		color: #333;
		font-size: 30upx;
	}

	.samplename {
		color: #fff;
		font-size: 30upx;
		font-weight: 700;
		line-height: 66upx;
		letter-spacing: 2upx;
		font-family: Source Han Sans CN;
		padding: 0 24upx;
		margin-bottom: 24upx;
		font-family: Source Han Sans CN;
		background-color: #525EF9;
		display: flex;
		justify-content: space-between;
	}
	.rows {
		    display: flex;
		    font-size: 16px !important;
		    /* height: 25px; */
		    line-height: 30px;
		    color: #333;
		    padding: 0 12px;
	}
	.contentInfos {
		flex: 1;
		line-height: 25px;
	}
	.nameInfos {
	    width: 120px;
	    margin-right: 5px;
	    text-align-last: justify;
	    font-weight: 700;
		color: #999999;
	}
</style>
